<template>
  <div class="intro-container" element-loading-background="transparent" v-loading="loading">
    <el-scrollbar>
    <!-- <el-image :preview-src-list="[data]" :src="data" /> -->
    <el-image  :src="data" />
    </el-scrollbar>
  </div>
</template>

<script setup>
import { getShiCFBByMarket } from "@/apis/subjectInfo";
import { ref } from "vue";
const data = ref();
const imgList = ref();
const loading = ref(false);
const getInfo = () => {
  loading.value = true;
  getShiCFBByMarket().then(res => {
    data.value = res.data[0].imgList[0];
    imgList.value = res.data[0].imgList;
    loading.value = false;
  });
};
getInfo();
</script>

<style lang="scss" scoped>
.intro-container {
  height: 100%;
  overflow: hidden;
  position: relative;
  .el-scrollbar{
    height: 100%;
  }
  img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
::v-deep .el-image {
  // position: absolute;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
}
</style>
